<template>
	<h3>1.阻止默认行为</h3>
	<a href="http://www.baidu.com">跳转百度网</a>
	<br/>
	<a href="http://www.baidu.com" @click.prevent>跳转百度网</a>
	<h3>2.阻止事件冒泡</h3>
	<div class="div1" @click="showmsg('我是祖父元素')">
		我是祖父元素
		<div class="div2" @click="showmsg('我是父元素')">我是父元素
		 <div class="div3" @click="showmsg('我是子元素')">我是子元素
			</div>
		 </div>
	</div>
	<h3>3.事件捕获</h3>
	<div class="div1" @click="showmsg('我是祖父元素')">
		我是祖父元素
		<div class="div2" @click.capture="showmsg('我是父元素')">我是父元素
		 <div class="div3" @click="showmsg('我是子元素')">我是子元素
			</div>
		 </div>
	</div>
	<h3>4.事件只能触发一次</h3>
	<div class="div3" @click.once="showmsg('使事件只触发一次')">使事件只触发一次</div>
	<h3>5.DOM元素只有自身触发事件时才执行事件方法</h3>
	<div class="div1" @click.self="showmsg('我是祖父元素')">
		我是祖父元素
		<div class="div2" @click.self="showmsg('我是父元素')">我是父元素
		 <div class="div3" @click.self="showmsg('我是子元素')">我是子元素
			</div>
		 </div>
	</div>
</template>

<script setup>
	//通过.prevent事件修饰符可以实现阻止默认事件行为的功能
	let showmsg=msg=>{
		console.log(msg)
	}
	
</script>

<style>
	.div1{
		width: 250px;
		height: 250px;
		background-color: #55ff00;
	}
	.div2{
		width: 150px;
		height: 150px;
		background-color: #00ffff;
	}
	.div3{
		width: 50px;
		height: 50px;
		background-color: #55aaff;
	}
</style>